<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系统管理页面</title>
<link rel="stylesheet" type="text/css" href="${ctx }/static/css/index.css"/>
<style type="text/css">
	#ajaxdiv{
		background-color: #515658;
		color:#EBEBEB;
		margin-left: 3px;
		padding: 3px;
	}
	#ajaxdiv:hover {
		background-color: #CDCDCD;
	}
</style>
	</head>
	<body>
		<input type="hidden" value="${user.loginName }" name="loginName"/>
		<div id="caiwu">
			<p style="font-size: 11px;">系统管理 <span>\财务管理</span></p>
			<form action="${ctx}/Finance/select" id="formome">
				<input type="hidden" value="${transactionType }" id="hidden">
			</form>
			<form action="${ctx }/" method="post" id="form">
				
				<div id="userDate">
					<div id="divinput" >
						<div>
							<label>搜索用户:</label><input type="text" name="userName" id="userName"/><lable>输入后自动搜索</lable>
							<div id="result"></div><br/>
						</div><br/>		
						<div id="data">
							<div>
								请选择类型:<select id="select" name="operationType">
											<option value="-1">--请选择--</option>
											<c:if test="${not empty transactionType }">
											<c:forEach items="${transactionType }" var="obj" >
												<option value="${obj.id }">${obj.type }</option>
											</c:forEach>
											</c:if>
										</select>
							</div>
						</div>	
						
						<div style="font-size:11px; ">
								<p>操作资金:<input type="text" name="monery"></p>
								<div id="zijin">
								重要提示:输入的资金数,<span style="color:red;">正数(1000)</span>
								为向账户增加1000元,<span style="color:red;">负数(-1000)</span>
								为账户减少1000元,精确到小数点两位数
								</div>
								<div>
									操作备注:<br/>
									<textarea id="textarea" name="remark"></textarea>
								</div>
						</div>
					</div>
				</div>
				<input id="button" type="button" value="确定" style="background-color: #03A8D8;color:#BFE8F7;">
			</form>
			<p style="color:red;">操作提示:输入的资金数,正数(1000)为账户增加1000元,负数(-1000)为账户减少1000元,精确到小数点两位数</p>
		</div>
		
		<script type="text/javascript" src="${ctx }/static/js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
				
				$('#title .ul #li').hover(
					function(){
						$(this).children(".tianlititle").show();},
					function(){
						$(this).children(".tianlititle").hide();
				});
				
				$(".xitongguanli li").click(function(){
					var val="-->"+$(this).text();
					if(val != ''){
						$("#div p span").text(val)
					}
					
					
				})
				
				
				 //根据用户输入信息进行模糊查询
				$("input[name=userName]").keyup(function(){
					var message=$(this).val();
					if(message == ''){
						$("#result").hide();
						return;
					}
					//使用ajax进行模糊查询验证
					$.ajax({
						url:'${ctx}/Finance/result/'+message,
						dataType:'json',
						contextType:'application/json;charset=UTF-8',
						beforeSend:function(){
							$('#result').append('<div>正在加载...</div>');
						},
						success:function(data){
							$("#result").empty().show();
							if(data  == ''){
								$('#result').append('<div>未找到  "'+message+'"</div>');
							}
							$.each(data,function(i,name){ //循环json数据里面的 想要拿到的index值
								$('#result').append('<span id="ajaxdiv">'+name['companyName']+'</span>');
							});
							
						},
						error:function(){
							$("#result").empty().show();
							$("#result").append('<div>请求错误'+message+'</div>')
							
						}
					})
				}) 
				
			
				//点击搜索数据复制给搜索框
				$(document).on('click','#ajaxdiv',function(){
					var word = $(this).text();
					$('input[name=userName]').val(word);
					$('#ajaxdiv').siblings(this).hide();
					$('#ajaxdiv').remove();
					
				}) 
   				
				//自动查询财务信息
				var hidden=$("#hidden").val();
				if(hidden == ''){
					$("#formome").submit();
				}
				
				
				//获取所有数据提交到数据库
				$("#button").click(function(){
					var userName=$("#userName").val(); //用户
					var denglumingzi=$("input[name=loginName]").val();//登陆用户
					var select=$("#select").val();	//转账类型
					var monery=$("input[name=monery]").val(); //操作金额
					var textarea=$("#textarea").val();//操作备注
					if(userName == ''){
						alert("用户不能为空!")
						return;
					}
					if(select == -1 ){
						alert("请正确选择类型")
						return;
					}
					
					var zhengze=/^(\-|\+{1})\d+(\.\d+)?$/;
					if(!zhengze.test(monery)){
						alert("请正确输入金额")
						return;
					}	
					$.ajax({
						url:'${ctx}/Finance/transfer/'+userName+'/'+denglumingzi,
						type:'post',
						dataType:'json',
						data:$("#form").serialize(),
						contextType:'application/json;charset=UTF-8',
						/* beforeSend:function(){
							function tiaozhuan(){
								window.location="${ctx}/pages/tishi.jsp";	
							}
							setTimeout(tiaozhuan,5000);
						}, */
						success:function(data){
							alert(JSON.stringify(data.name));
						},
						error:function(){
							alert("请求失败!")
						}
					})
				});
			})
			
		</script>
	</body>
</html>